    <template>
		<view class="main-class">
			<tn-sticky>
				<view class="header-class tn-flex justify-end" >
					<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>			
					<view class="navbar-class tn-pb">
						<tn-navbar  height="45px" home-icon="left" back-icon="" :bottom-shadow = "false" bg-color="tn-type-primary_bg" index-url="/pages/index/index"> 客户品种流失 </tn-navbar>
					</view>
				</view>
			</tn-sticky>
		<view class="tn-pt-xl tn-flex justify-between tn-pl-sm tn-pr-sm">
			 <view class="tn-w-1-4 " @click="openCalendarPopup">
				<tn-input v-model="head.startDate" placeholder="开始日期"  readonly size = "sm" />
			</view >
			<view class="tn-w-1-4 "  @click="openCalendarPopup">
				<tn-input v-model="head.endDate" placeholder="结束日期"  readonly size = "sm" />
			</view>
			<tn-icon name="search" class="tn-pl-sm tn-pr-sm" @click="doGetOneTableData"/>
			<!--  <tn-icon name="search" class="tn-pl-sm tn-pr-sm" @click="doGetOneTableData"/> -->
		</view>		
		<view class="tn-pt-xl tn-flex justify-between tn-pl-sm tn-pr-sm">
			<view class="tn-w-1-4 ">
				<tn-input v-model="head.clientcon" placeholder="客户"  size = "sm"/>
			</view>
			<view class="tn-w-1-4 ">
				<tn-input v-model="head.goodscon" placeholder="品种"  size = "sm"/>
			</view>
			<!-- <view class="tn-w-1-4 ">
				<tn-input v-model="head.businesscon" placeholder="客户名称"  size = "sm"/>
			</view> -->
			<!--  <view class="tn-w-1-4 " @click="openCalendarPopup">
				<tn-input v-model="head.startDate" placeholder="开始日期"  readonly size = "sm" />
			</view >
			<view class="tn-w-1-4 "  @click="openCalendarPopup">
				<tn-input v-model="head.endDate" placeholder="结束日期"  readonly size = "sm" />
			</view> -->
			<tn-icon name="search" class="tn-pl-sm tn-pr-sm" @click="doGetOneTableData"/>
		</view>	
        <view class="tn-pt-xl">
            <!-- height 单元格高度  border 是否带有纵向边框 type值为type="selection" 时开启多选 loading显示加载中(默认false) emptyText 空数据时显示的文本内容-->
            <th-table :column="oneTableHead" :listData="oneTableData"   height="0.5" :border="true" :loading="false" >
            </th-table>
        </view>
		
		<tn-popup v-model="showCalendarPopup" open-direction="top">
		  <view class="tn-pt">
		    <tn-calendar v-model="selectDate" min-date="2024-01-01" mode="range" class="calendar-class" />
		  </view> 
		  <view class="tn-mt tn-w-full tn-pb">
		    <tn-button
		      font-size="36"
		      custom-class="popup-calendar-button"
		      @click="closeCalendarPopup"
		    >
		      选择所选日期
		    </tn-button>
		  </view>
		</tn-popup>
		
		</view>
		
		
    </template>


<script setup>
	
	// 自定义插槽单元格点击事件

	import { ref,reactive,onMounted } from 'vue'
	import { postCall } from '@/api/index.js'
	import dayjs from "dayjs";
	const procName = "PROC_APP_DO_CLIENT_LS_REPORT";
	
	import { createParams } from '@/utils/utils.js'
	
	const head = reactive ({
		clientcon:"",
		startDate:"",
		endDate:"",
		goodscon:""
	});
	
	onMounted(()=>{
		const firstDayOfMonth = dayjs().startOf('month');
		let date = {
						"startDate":firstDayOfMonth.format('YYYY-MM-DD'),
						"endDate":dayjs().format("YYYY-MM-DD")
					}
		Object.assign(head,date);
		doGetOneTableHead();
		doGetOneTableData();
		
	})
	
	
	
	
	const oneTableHead = reactive([]);
	const oneTableData = reactive([]);
	
	const showCalendarPopup = ref(false);
	
	const selectDate = ref('')
	
	const openCalendarPopup = () => {
	  showCalendarPopup.value = true
	}
	
	const closeCalendarPopup = () => {
	  showCalendarPopup.value = false
	  let date = {
				"startDate":dayjs(selectDate.value[0]).format('YYYY-MM-DD'),
				"endDate":dayjs(selectDate.value[1]).format('YYYY-MM-DD')
	  		}
	   Object.assign(head,date);
	}
	
	let doGetOneTableHead = () =>{
		let params = {};
		params["P_ACTION"] = "ONE_TABLE_HEAD";
		params["P_PROC_NAME"] = procName;
		postCall(params).then(res=>{
			Object.assign(oneTableHead,res.data.DATASET);
			console.log(oneTableHead)
		})
	}
	
	let doGetOneTableData = () =>{
		oneTableData.length = 0;
		let params = {};
		params["P_ACTION"] = "ONE_TABLE_DATA";
		params["P_PROC_NAME"] = procName;
		postCall(Object.assign( createParams(head) , params)).then(res=>{
			if(res){
				Object.assign(oneTableData,res.data.DATASET);
				console.log(oneTableData)
			}
		})	
	}
	
	const clickRow = (row) =>{
		uni.setStorageSync("REPORT",Object.assign( createParams(row),createParams(head)));		
		uni.navigateTo({
			url: '/pages/report/clientLSReprotDetail'
		});
	}
	
</script>


<style scoped>
	.table-class{
		overflow-x: scroll;
	}
	.header-class{
		height: 17vh !important;
		flex-direction: column
	}
	.form-class{
		width: 90vw;
		margin-left: 5vw;
	}
	.button-class{
		margin-top: 5vh;
		width: 90vw;
		border-radius: 40px !important;
		/* color: #FFFFFF !important; */
		background: linear-gradient(to right,  #47e8be,#3379dc);
		/* border: 0px solid rgba(0, 0, 0, 0.2) !important; */
		color: #FFFFFF;
	}
	
	.button-class::after{
		border: 0px solid rgba(0, 0, 0, 0.2) !important;
	}
	
	.navbar-class{
		font-size: 20px;
		color: #FFFFFF;
	}
	.calendar-class{
		/* height: 35vh; */
		height: 100% !important;
		margin-top: 5vh;
	}
</style> 




 